<template>

  <div class="container" id="walletInfo">
    <div class="head-top">
      <span>联系人</span>
      <div @click="contactVisible=!contactVisible">
        +
      </div>
      <img @click="$router.push({name:'My',params:{index:4}})" src="static/img/return.png" width="100%" height="100%"/>
    </div>
    <!-- <div class="header"
         style="width: 100%;border-bottom:1px solid rgba(0,0,0,0.1);position: relative">
      <div class="return" @click="$router.push({name:'My',params:{index:4}})"
           style="position: absolute;top:.7rem;left:1rem;width: 1.4rem;height: 1.4rem">
        <img src="static/img/return.png" width="100%" height="100%"/>
      </div>
      <h2 style="margin:0rem;padding: .6rem;font-size: 1.3rem;text-align: center;font-weight: 600">
        联系人</h2>


      <div @click="contactVisible=!contactVisible"
        style="position: absolute;top:.2rem;right:0.8rem;width: 1.4rem;height: 1.4rem;font-size: 1.5rem" >
        +
      </div>
    </div> -->

    <div style="position: absolute;top:15%;left:41%" v-if="!contactList||contactList.length<1">
      无联系人~
    </div>

    <div class="contactBox">
      <div v-for="contact,index in contactList" @click="showContact(contact)">
        <div><img src="static/img/contact.png"></div>
        <div>
          <div>{{contact.name}}</div>
          <div>{{contact.address}}</div>
        </div>
        <div>
          {{contact.date}}

        </div>

      </div>

    </div>


    <mt-popup
      v-model="contactVisible"
      popup-transition="popup-fade"
      style="width: 80%;padding:1rem;border-radius:.3rem;" >

      <div style="position: absolute;right:1rem;top:.5rem;font-size: 1.7rem;color:gray" @click="close">×</div>

      <div style="width: 100%;text-align: center">
        <div style="margin-bottom: .1rem">
          <img src="static/img/contact.png" style="width: 1.8rem;height: 1.8rem;">
        </div>
        <div style="">{{showcontact?'联系人':'新建联系人'}}</div>
      </div>

      <mt-field placeholder="姓名" v-model="name"
                    style="text-align: center;width: 90%;margin:0px auto;"></mt-field>


      <mt-field placeholder="钱包地址" v-model="address"
                style="text-align: center;width: 90%;margin:0px auto"></mt-field>

      <mt-field placeholder="手机号" v-model="phone"
                style="text-align: center;width: 90%;margin:0px auto"></mt-field>

      <mt-field placeholder="邮箱" v-model="email"
                style="text-align: center;width: 90%;margin:0px auto"></mt-field>

      <mt-field placeholder="备注" v-model="remark"
                style="text-align: center;width: 90%;margin:0px auto"></mt-field>

      <mt-button v-if="!showcontact" @click="addContact" style="width: 50%;margin:1rem auto 0rem auto;display: block;height:2rem" type="primary">完成</mt-button>

    </mt-popup>

  </div>

</template>

<script>


  import {mapGetters, mapActions} from 'vuex'
  import {Dialog} from 'vant'

  import utils from 'ethereumjs-util'

  import {Popup} from 'mint-ui'

  export default {
    components: {
      Popup
    },
    data() {
      return {
        contactVisible: false,
        showcontact:false,
        name: '',
        address:'',
        phone:'',
        email:'',
        remark:''
      }
    },

    computed: {
      ...mapGetters(['contactList'])
    },
    methods: {
      ...mapActions(['setContactList']),
      formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
      },
      showContact(contact){
        this.showcontact=true;
        this.name=contact.name
        this.address=contact.address
        this.phone=contact.phone
        this.email=contact.email
        this.remark=contact.remark
        this.contactVisible=true
      },
      addContact(){

        if(!this.name){
          this.contactVisible=false
          Dialog.alert({
            title: '提示',
            message: '姓名不能为空!'
          }).then(() => {

          });
          return
        }

        if(!this.address){
          this.contactVisible=false
          Dialog.alert({
            title: '提示',
            message: '地址不能为空!'
          }).then(() => {

          });
          return
        }

        if(!utils.isValidAddress(this.address)){
          this.contactVisible=false
          Dialog.alert({
            title: '提示',
            message: '不是有效的钱包地址!'
          }).then(() => {

          });
          return
        }

        if(this.contactList){

          for(let i=0;i<this.contactList.length;i++){
            if(this.contactList[i].address==this.address){
              this.contactVisible=false
              Dialog.alert({
                title: '提示',
                message: '该地址已存在!'
              }).then(() => {

              });
              return
            }
          }
        }else{
          this.contactList=[]
        }

        let contact={
          name:this.name,
          address:this.address,
          phone:this.phone,
          email:this.email,
          remark:this.remark,
          date:this.formatDateTime(new Date().getTime()).substring(0,10)
        }

        this.contactVisible=false
        this.contactList.push(contact)
        this.setContactList(this.contactList)

        let _this=this
        setTimeout(()=>{
          _this.name=''
          _this.address=''
          _this.phone=''
          _this.email=''
          _this.remark=''
        },500)
      },
      close(){
let _this=this
        this.contactVisible=false
        setTimeout(()=>{
          _this.showcontact=false
          _this.name=''
          _this.address=''
          _this.phone=''
          _this.email=''
          _this.remark=''
        },500)

      }
    },
    async mounted() {


    }

  }
</script>
<style lang="less" scoped>
  @import url("../../assets/css/myContact.less");
</style>

